<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
	<head>
		<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
		<link type="text/css" rel="stylesheet" href="stylesheets/site.css" />
		<link type="text/css" rel="stylesheet" href="stylesheets/multiple-themes.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
		<script src="javascripts/jquery.uniform.min.js" type="text/javascript"></script>
		<script type='text/javascript' src="javascripts/mustache.js"></script>
		<script type='text/javascript' src="javascripts/ICanHaz-no-mustache.min.js"></script>
		<script type='text/javascript' src="javascripts/multiple-themes.js"></script>
		<title>Uniform - Multiple Themes At Once</title>
	</head>
	<body class='index'>
		<div id="frame">
			<div id="header">
				<h1 class="title"><a href="index.html">Uniform</a></h1>
				<h2 class="subtitle">Multiple themes on a single page</h2>
			</div>

			<div id="docs">
				<p>Sometimes you are not happy with just one.  You want more.</p>

				<p>Did you ever want to have multiple ways that inputs could appear?  <a href="index.html">Uniform</a> can do that for you as well.  It's a bit harder and you'll need to build a custom CSS file using <a href="http://sass-lang.com/">Sass</a>, but I'm sure you will get the hang of things.</p>

				<h1>Simple Example</h2>

				<p>If your themes have the same size elements in the sprite, you can do things the easy way.  Simply add a few classes and rely on CSS being overridden.</p>

				<div class="simple-example example">
					<input type="text" class="simple" value="Default"><br>
					<span class="jeans">
						<input type="text" class="simple" value="Jeans">
					</span>
				</div>

				<h2>HTML, JavaScript, CSS</h2>

				<p>To do this, you need to only wrap your elements a bit.</p>

				<pre>&lt;input type="text" class="simple" value="Default"&gt;&lt;br&gt;
&lt;span class="jeans"&gt;
	&lt;input type="text" class="simple" value="Jeans"&gt;
&lt;/span&gt;
</pre>

				<p>The JavaScript actually doesn't change at all.  Just style everything.</p>

				<pre>$('input, select').uniform();
</pre>

				<p>Next up, just add a bit of SCSS.  If you want to see the necessary CSS instead, take a look at the bottom of the stylesheet for this example page.</p>

				<pre>/* Default theme */
@import "../../themes/default/css/uniform.default.scss";

.jeans {
	@include use-backgrounds(url('../images/sprite-jeans.png'), 0, url('../images/bg-input-jeans.png'), url('../images/bg-input-focus-jeans.png'), 0);

	input {
		color: #FFE000;
	}
}
</pre>

				<h2>Tradeoffs</h2>

				<p>Even for this simple example you will notice that I needed to override the input colors for the jeans theme.  Doing this with complex themes is much worse than the "Complex Example" below.</p>

				<p>The sprite images must have identically sized elements.  You can change colors, but not the position of anything.</p>

				<p>You need to wrap your elements</p>

				<p>The resulting CSS is smaller than the complex example.</p>

				<h1>Complex Example</h1>

				<p>Nothing says "success" more than actually seeing that it works.</p>

				<div class="examples">
					<script type="text/html" id="exampleTemplate">
						{{#.}}
							<div class="example example-{{theme}}">
								<h2>{{name}}</h2>
								<input type="text" class="uniform-{{theme}}" value="{{name}}"><br>
								<select class="uniform-{{theme}}">
									<option value="{{theme}}">{{name}}</option>
								</select>
								<input type=checkbox checked="CHECKED">Nice!
							</div>
						{{/.}}
					</script>
				</div>

				<h2>HTML</h2>

				<p>Here's some sample HTML that we are going to theme two ways.</p>

				<pre>&lt;input type="text" class="default"&gt;
&lt;input type="text" class="agent"&gt;
</pre>

				<h2>Sass / SCSS / CSS</h2>

				<p>It's easiest to just use some SCSS to build your CSS file.  The general idea is that you can wrap each theme in a special CSS selector.  You can also have the default theme without a selector so elements can fall back to that gracefully.  Let me show you with this example:</p>

				<pre>/* File: myThemes.scss */
/* Default theme */
@import "themes/default/css/uniform.default.scss";

/* Agent */
$class-wrapper: ".uniform-agent"
@import "themes/agent/css/uniform.agent.scss";

/* And you keep adding as many themes as you'd like */
</pre>

				<p>You can peek at the <a href="stylesheets/multiple-themes.scss">SCSS file</a> that was used to generate the CSS for this very page.</p>

				<h2>The JavaScript</h2>

				<p>Here's the trick: selecively apply $.uniform() and use the "wrapperClass" property to define a globally applied class.</p>

				<pre>$(function () {
	// Apply the agent theme selectively
	$('input.agent').uniform({wrapperClass: "uniform-agent"});

	// Apply the default theme to the rest - Don't worry, Uniform will
	// not apply styling to an element twice
	$('input').uniform();
});
</pre>

				<h2>Tradeoffs</h2>

				<p>The simple method is possible without sass.  This one really relies upon it because you build out the CSS files.</p>

				<p>The generated CSS isn't as small as it could be if you were to do this by hand.</p>

				<p>This does support far more themes and they have all of their colors and sizes properly applied.  It's less troublesome because you don't need to worry about restyling things.</p>
			</div>
		</div>
	</body>
</html>
